﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Game tutorial</title>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        function changePage(page) {
            var url = page;
            $.ajax({
                url: url,
                success: function (data) {
                    $("#main").html(data);
                }
            });
        }

        (function () {
            var match,
				pl = /\+/g, // Regex for replacing addition symbol with a space
				search = /([^&=]+)=?([^&]*)/g,
				decode = function (s) {
				    return decodeURIComponent(s.replace(pl, " "));
				},
				query = window.location.search.substring(1);

            var urlParams = {};
            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);
            window.gameUrl = "../indexPreview.html?turkSubmitTo=" + urlParams["turkSubmitTo"] + "&assignmentId=" + urlParams["assignmentId"];
            window.longTuto = "index.html?turkSubmitTo=" + urlParams["turkSubmitTo"] + "&assignmentId=" + urlParams["assignmentId"];
        })();

        function goToGame() {
            window.location = window.gameUrl;
        }
        function goToLongTuto() {
            window.location = window.longTuto;
        }
    </script>
    <link rel="Stylesheet" href="tutorial.css" type="text/css" />
    <style>
        #content {
            font-size: 20px;
            line-height: 38px;
        }

        table {
            margin: 0;
        }

        tr {
            padding-top: 0;
            height: auto;
            margin-top: 0;
        }

        td {
            padding-right: 50px;
        }

        .red {
            color: Red;
        }

        th {
            text-align: left;
            padding-right: 50px;
        }

        #content {
            border-color: #0036D9;
        }

        #top h1 {
            color: #0036D9;
        }

        #top {
            margin-top: 0;
            padding-top: 0;
        }

        #middle {
            padding: 0;
        }

        body {
            padding: 0;
            margin: 0;
        }

        #main {
            margin-top: 0;
            padding-top: 0;
        }

        .number {
            width: 100px;
            border-color: #0036D9;
            color: #0036D9;
            float: right;
        }

        img {
            float: right;
        }

        ol {
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="top">
            <h1>
                General
            </h1>
        </div>
        <div id="middle">
            <div id="content">
                SpaceGame is a flight game.<br />
                <img src="../imgs/tutorialImg/meteor2.png" />
                Your goal is to control the spaceship and to earn as many points($) as possible.<br />
                Points($) are earned when the spaceship shoots down a meteor.<br />
                In order to function properly, the spaceship needs to be well maintained.<br />
                <img src="../imgs/tutorialImg/ship.png" />
                As you gain points your number of cannons will increase (you will receive a second cannon once you reach 500 points, a third cannon once you reach 2,000 points, a fourth once you reach 4,000 points, and a fifth once you reach 8,000 points)<br />
                
                Points($) are lost when:
                <ol>
                    <li>a meteor hits the ship </li>
                    <li>a maintenance action is performed</li>
                    <li>a malfunction is repaired</li>

                </ol>
                You should play 4 games. The total duration of all of the games is 14 minutes.
                <div class="number">
                    <a href="#" onclick="changePage('sp2_FGN.html')">>></a>
                </div>
            </div>

        </div>


    </div>

</body>
</html>
